
<template>
  <div class="relative">
    <div class="title" style="paddingTop: 23px;">集团介绍</div>
    <div class="left-con">
      <div class="icon-cards">
          <div class="icon-cards__content">
              <div class="icon-cards__item"><img src="@/assets/p_004.png" alt /></div>
              <div class="icon-cards__item"><img src="@/assets/p_005.png" alt /></div>
              <div class="icon-cards__item"><img src="@/assets/p_006.png" alt /></div>
          </div>
      </div>
      <!-- <div class="left-con-1">
        <img src="@/assets/p_005.png" alt />
      </div>
      <div class="left-con-2">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;富润通科技（深圳）有限公司（QL)是经深圳市工商局登记注册成立之企业；成立于二零一四年十二月, 注册资金为1000万人民币。公司位于深圳市龙华清湖富安娜工业园内。
        可进行独立的货物进出口报关申报，配有专业的运输车队，可为客户提供更方便，快捷，安全的珠三角配送业务。公司创办以来坚持以人为本,注重人员队伍的引进、技术培训
        与管理。拥有4800平方米的生产和办公场地，员工人数300人左右。 本公司可承接各类电子板卡的ODM、OEM以及来料加工业务，加工项目 始终坚持“追求卓越、精益求精、
        精益求精”的核心价值观和“始终关注客户需求”的服务理念，力争成为智能制造领域的领跑者 富润通（品新）科技集团公司定位于一站式电子科技产品综合服务解决方案供应商，
        依托旗下丰富的业务平台资源和完善的数字化运营流程，为全球客户提供半导体（芯片）设计、AI产品研发设计、数字化解决方案、供应链管理与运营、智能制造、全球售后服务
        等综合服务，致力于打造“全球领先的科技产品全价值链综合服务商”。 现代化民营企业集团总部设立于中国——深圳后海总部基地 旗下8家子公司，阿米巴经营管理，既可独立接单，
        又可整合为全链条为客户服务2家100%自有工厂，全体员工人数1000+成立三十年，专注于电子科技产品的全价值链条综合服务，服务超过200家海内外外电子科技知名企业。
        品新科技集团公司定位于一站式电子科技产品综合服务解决方案供应商，依托旗下丰富的业务平台资源和完善的数字化运营流程，为全球客户提供半导体（芯片）设计、A智慧算法、
        AI智能硬件研发、数字化解决方案、VIM管理服务、智能制造等综合服务，致力于打造“全球领先的科技产品全价值链综合服务商”。 扎根电子行业三十余年，品新科技集团一直专注电脑周边及科技类产品的综合服务，
        在全国20多个主要城市（包括台北、香港）设立物流配送中心；旗下拥有7家子公司，包括3家100%自有工厂及多家控股工厂，公司员工人数超过4000人，为200多家国内外知名企业提供优质的服务。
        未来，公司将继续秉持“以客户为中心，以价值创造为主线，长期坚持艰苦奋斗”的核心价值观，以VIM服务为载体，智能制造为基础，数字化为手段，致力于打造一个跨界融合、
        共享共赢的B2B2C/O2O价值链商业生态圈，以“新流通”为全球客户提供电子设计方案、生产制造和产品管理综合服务，满足广大客户需求，实现“持续为客户提供有竞争力的智能硬件产品和综合服务”的企业使命 -->
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['dataList', 'type'],
  components: {},
  data() {
    return {}
  },
  watch: {},
  mounted() {},
  methods: {},
}
</script>

<style scoped lang='less'>
.relative {
  height: 450px;
  .title {
    font-size: 24px;
    font-weight: 400;
    color: #e9f2f9;
    text-align: center;
  }
  .left-con {
    margin: 5px 18px 0 18px;
    text-align: center;
    width: 420px;
    height: 385px;
    .left-con-1 {
      img {
        height: 200px;
        width: 420px;
      }
    }
    .left-con-2 {
      margin-top: 3px;
      height: 180px;
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
      opacity: 0.5;
      overflow: auto;
      width: 420px;
    }
  }
  .labelBox {
    position: absolute;
    height: 10%;
    width: 100%;
    top: 66px;
    margin: 0;
    padding: 0 20px;
    justify-content: space-between;
    .square {
      height: 16px;
      width: 16px;
      background-color: #0c2f74;
      border: 1px solid white;
      margin-right: 10px;
    }
  }
}

//3D旋转
.icon-cards {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 380px;
    height: 250px;
    -webkit-perspective: 800px;
    perspective: 800px;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.icon-cards__content {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateZ(-182px) rotateY(0);
    transform: translateZ(-182px) rotateY(0);
    -webkit-animation: carousel 10s infinite cubic-bezier(1, 0.015, 0.295, 1.225) forwards;
    animation: carousel 10s infinite cubic-bezier(1, 0.015, 0.295, 1.225) forwards;
}
.icon-cards__item {
    position: absolute;
    top: 0;
    left: 0;
    width: 380px;
    height: 250px;
    border-radius: 6px;
    img{
      width: 380px;
      height: 250px;
    }
}
.icon-cards__item:nth-child(1) {
    // background: rgba(252, 192, 77, 0.9);
    -webkit-transform: rotateY(0) translateZ(182px);
    transform: rotateY(0) translateZ(182px);
}
.icon-cards__item:nth-child(2) {
    // background: rgba(49, 192, 204, 0.9);
    -webkit-transform: rotateY(120deg) translateZ(182px);
    transform: rotateY(120deg) translateZ(182px);
}
.icon-cards__item:nth-child(3) {
    // background: rgba(236, 233, 242, 0.9);
    -webkit-transform: rotateY(240deg) translateZ(182px);
    transform: rotateY(240deg) translateZ(182px);
}
@-webkit-keyframes carousel {
    0%, 17.5% {
        -webkit-transform: translateZ(-182px) rotateY(0);
        transform: translateZ(-182px) rotateY(0);
    }
    27.5%,
    45% {
        -webkit-transform: translateZ(-182px) rotateY(-120deg);
        transform: translateZ(-182px) rotateY(-120deg);
    }
    55%,
    72.5% {
        -webkit-transform: translateZ(-182px) rotateY(-240deg);
        transform: translateZ(-182px) rotateY(-240deg);
    }
    82.5%,
    100% {
        -webkit-transform: translateZ(-182px) rotateY(-360deg);
        transform: translateZ(-182px) rotateY(-360deg);
    }
}
@keyframes carousel {
    0%, 17.5% {
        -webkit-transform: translateZ(-182px) rotateY(0);
        transform: translateZ(-182px) rotateY(0);
    }
    27.5%,
    45% {
        -webkit-transform: translateZ(-182px) rotateY(-120deg);
        transform: translateZ(-182px) rotateY(-120deg);
    }
    55%,
    72.5% {
        -webkit-transform: translateZ(-182px) rotateY(-240deg);
        transform: translateZ(-182px) rotateY(-240deg);
    }
    82.5%,
    100% {
        -webkit-transform: translateZ(-182px) rotateY(-360deg);
        transform: translateZ(-182px) rotateY(-360deg);
    }
}
</style>
